﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Demo</title>

    <script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="Scripts/highcharts.js"></script>
    <script type="text/javascript" src="Scripts/exporting.js"></script>
    <script>



        var chart;
        var dataCount = 10;
        var minValue = 0;
        var maxValue = 1;
        var trigger = 0.0;
        var refreshInterval =5;
        var refreshJobID;
        $(function () {
            $(document).ready(function () {

                initConfiguration();

                initChart();

                startRefreshJob();

            }
            )
        });

        function startRefreshJob() {
            refreshInterval = parseInt($("#RefreshInterval").val());
            dataCount = parseInt($("#DataCount").val());
            minValue = parseFloat($("#minValue").val());
            maxValue = parseFloat($("#maxValue").val());
            trigger = parseFloat($("#Trigger").val());
            chart.yAxis[0].setExtremes(minValue, maxValue);


            refreshJobID = setInterval(function () {
                loadRemoteData(chart.series[0])
            }, 1000 / refreshInterval);
        }
        function stopRefreshJob() {
            clearInterval(refreshJobID);
        }

        function loadRemoteData(series) {
            
            //console.log("load started:" + Date.now());
            $.ajax({
                url: 'BonderDataService.svc/getData?dataCount=' + dataCount + '&callback=? ',
                cache: false,
                dataType: "json",
                success: function (data) {

                    var newData2 = [];
                    var remoteData = data.d;
                    var dLength = remoteData.length;
                    for (i = 0; i < dLength; i++) {
                        newData2.push({
                            x: remoteData[i].x,
                            y: remoteData[i].y
                        });
                    }

                    series.setData(newData2);
                   
                    //console.log("load finished: " + Date.now());
                    //console.log("loadRemoteData Success");
                },
                fail: function (data) {
                    //console.log("loadRemoteData Failed");
                }
            });

        };

        function initChart() {
            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });

            var options = {
                chart: {
                    renderTo: container,
                    type: 'spline',
                    animation: Highcharts.svg, // don't animate in old IE
                    marginRight: 10,
                    events: {
                    }
                },
                title: {
                    text: 'Live random data'
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 100
                },
                yAxis: {
                    title: {
                        text: 'AMP'
                    },
                    min: minValue,
                    max: maxValue
                    //plotLines: [{
                    //    value: 0,
                    //    width: 1,
                    //    color: '#808080'
                    //}]
                },
                //tooltip: {
                //    formatter: function () {
                //        return '<b>' + this.series.name + '</b><br/>' +
                //        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                //        Highcharts.numberFormat(this.y, 2);
                //    }
                //},
                legend: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                series: [{
                    name: 'Random data'
                }]
            };

            chart = new Highcharts.Chart(options);


        }

        function initConfiguration() {
            $("#RefreshInterval").val(refreshInterval);
            $("#DataCount").val(dataCount);
            $("#minValue").val(minValue);
            $("#maxValue").val(maxValue);
            $("#Trigger").val(trigger);

        }
        function applyRefreshInterval(self) {
            stopRefreshJob();
            startRefreshJob();
        }
    </script>
</head>
<body>
    <div id="container" style="min-width:700px;height:400px"></div>
    <div>
        <div style="width:200px">FPS</div>

        <input id="RefreshInterval" type="text" style="margin-left:15px" />
        <input id="applyRefreshInterval" type="button" value="Apply" style="margin-left:15px" onclick="applyRefreshInterval(this)">
    </div>
    <div>
        <div style="width:200px">Duration(ms)</div>

        <input id="DataCount" type="text" style="margin-left:15px" />
        <input id="applyDataCount" type="button" value="Apply" style="margin-left:15px" onclick="applyRefreshInterval(this)">
    </div>
    <div>
        <div style="width:200px">AMP Min</div>

        <input id="minValue" type="text" style="margin-left:15px" />
        <input id="applyminValue" type="button" value="Apply" style="margin-left:15px" onclick="applyRefreshInterval(this)">
    </div>
    <div>
        <div style="width:200px">AMP Max</div>

        <input id="maxValue" type="text" style="margin-left:15px" />
        <input id="applymaxValue" type="button" value="Apply" style="margin-left:15px" onclick="applyRefreshInterval(this)">
    </div>
    <div>
        <div style="width:200px">Trigger</div>

        <input id="Trigger" type="text" style="margin-left:15px" />
        <input id="applyTrigger" type="button" value="Apply" style="margin-left:15px" onclick="applyRefreshInterval(this)">
    </div>
</body>

</html>
